<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .gameMain{
            width: 1000px;
            height: 1000px;
            position: absolute;
            background: url('./img/background_2.png');
        }
        .score{
            position: absolute;
            left: 30px;
            top: 30px;
        }
        .score span{
            font-size: 30px;
            font-weight: bolder;
        }
        .gameOver{
            width: 320px;
            height: 320px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            background: #c2c8c9;
            border: 3px solid black;
            border-radius: 10px;
            font-size: 40px;
            text-align: center;
            display: none;
            z-index: 5;
        }
        .gameOver div{
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .gameOver div:nth-child(2){
            padding: 75px 0;
            border-top: 3px solid black;
            border-bottom: 3px solid black;
        }
        .gameOver div:nth-child(3){
            cursor: pointer;
        }
        .gameStage{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="gameMain">
        <div class="score">
            <span>分数：</span>
            <span class="sco">0</span>
        </div>
        <div class="gameOver" >
            <div>飞机大战分数</div>
            <div>0</div>
            <div>重新开始</div>
        </div>
        <div class="gameStage">

        </div>
    </div>
</body>
</html>
<script type="module">

    /*
        敌人：
            属性：
                位置，宽高，图片，分数，速度，爆炸图片，血量，是否爆炸
            行为：
                渲染敌人、向下移动，爆炸，碰撞主角。
        主角：
            属性：
                位置，宽高，图片，爆炸图片，攻击力。
            行为：
                渲染主角，移动(鼠标跟随移动)，发射子弹，爆炸。
        子弹：
            属性：
                位置，宽高，图片
            行为：
                渲染子弹、移动、撞敌机
        场景管理类：
            用于控制，出现的敌机个数，出现的时间间隔。

    */
    
    import {Manager} from './js/manager.js'
    new Manager();
</script>